import React, { memo, useState } from 'react';
import { Col, Row } from 'antd';

import { DATA_DISPLAY_DATA } from '../data';
import styles from '../style.less';
import { currency } from '@/utils/tools';

function checkNeedCurrency(val: number, needCurrency: boolean) {
  return needCurrency ? currency(val) : val;
}

const DataDisplay = memo((props: any) => {
  const { data, itemClick } = props;
  const displayData = DATA_DISPLAY_DATA.map(item => {
    item.value = data[item.key] || [0, 0];
    return item;
  });
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <Row align="top" className={styles.displayContainer}>
      <Col offset={1} span={3} className={styles.colItem} style={{ paddingTop: '49px' }}>
        <p>今日</p>
        <p>昨日</p>
      </Col>
      {displayData.map((item, index) => (
        <Col
          span={3}
          className={
            index !== activeIndex ? styles.colItem : `${styles.colItem} ${styles.activeCol}`
          }
          key={item.title}
          onClick={() => {
            setActiveIndex(index);
            itemClick(item.key);
          }}
        >
          <p>{item.title}</p>
          <p>{checkNeedCurrency(item.value['0'], item.needCurrency)}</p>
          <p>{checkNeedCurrency(item.value['1'], item.needCurrency)}</p>
        </Col>
      ))}
    </Row>
  );
});

export default DataDisplay;
